<template>
  <el-container style="height:100%">
    <el-aside :width="linkMenuWidth" style="background-color:#545c64">
      <LinkMenu :collapsed="isCollapse" :menus="menus"></LinkMenu>
    </el-aside>
    <el-container>
      <el-header >
        
        <el-row>
          <el-col :span="1"><i class="el-icon-s-grid" @click="menuClose" ></i></el-col>
          <el-col :span="21">
            <el-breadcrumb separator-class="el-icon-arrow-right"  style="">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item><a href="/about">活动管理</a></el-breadcrumb-item>
              <el-breadcrumb-item>活动列表</el-breadcrumb-item>
              <el-breadcrumb-item>活动详情</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <el-col :span="1">
               <el-tooltip class="item" effect="dark" content="统计" placement="bottom">
                   <i class='el-icon-s-operation'></i>
               </el-tooltip>
          </el-col>
          <el-col :span="1">
  
                
                <el-dropdown size="mini" style="padding-top:6px">
                  <span class="el-dropdown-link">
                       <el-avatar slot="reference" :size="25" src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item> <router-link to="/about">个人信息</router-link></el-dropdown-item>
                    <el-dropdown-item><router-link to="/about">退出登录</router-link></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
             
          </el-col>

        </el-row>
       
      </el-header>
      <el-main>
         <router-view/>
      </el-main>
      <el-footer style="text-align:center">
          友情链接:国家食品药品监督管理总局 陕西省食品药品监督管理局 西安市食品药品监督管理局
      </el-footer>
    </el-container>
</el-container>
</template>

<script>
import LinkMenu from '@/components/menu/menu.vue';
import {menus} from '../libs/api';
export default {
     components: {
        LinkMenu
     },
     data() {
        return {
          isCollapse: false,
          linkMenuWidth:"15%",
          menus:[]
        };
      },
     methods: {
         menuClose(e){
           this.isCollapse=!this.isCollapse;
           if(this.isCollapse){
              e.target.className="el-icon-s-unfold";
              this.linkMenuWidth="65px"
           }else{
              e.target.className="el-icon-s-grid";
              this.linkMenuWidth="15%";
           }
         
         }
     },
      mounted () {
          menus().then((res) => {
						 this.menus=res;
					})
           
      }
}
</script>

<style>

.el-header{
   box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

  .el-header, .el-footer ,.el-breadcrumb,.head{   
    /* padding-top: 20px; */
    line-height: 60px;
    float: left;
    display: inline-block;
      /* background-color: #E9EEF3; */
   
  }
  
  .el-main {
  
    color: #333;
    text-align: center;
  }
  
  body > .el-container {

  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }

a {
  text-decoration: none;
}
 
.router-link-active {
  text-decoration: none;
}
</style>
